<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./Css/signIn.css">
</head>

<body>

    <main id="main_id">
        <section id="glassBox">
            <span id="signinBtmBLine" class="BottomLine blackClassLine"></span>
            <div id="signinBtm" class="fontClass">登录</div>
            <div id="signupBtm" class="fontClass">注册</div>

            <div id="userNameFr" class="Fr">
                <span id="userNameFrNameTag" class="Tag"></span>
                <p id="hiddenBox"></p>
                <input type="text" id="userNameFrNameInput" maxlength="12" placeholder="用户名"
                    oninput="NameInput(this,'NameInput')" class="inputText">
                <span id="userNameFrInputBLine" class="BottomLine blackClassLine"></span>
                <span id="userNameFrErrTag" class="Tag"></span>
            </div>

            <div id="userPwdFr" class="Fr">
                <span id="userPwdFrPwdTag" class="Tag"></span>
                <input type="password" id="userPwdFrPwdInput" maxlength="12" placeholder="密码"
                    oninput="NameInput(this,'NameInput')" class="inputText">
                <span id="userPwdFrInputBLine" class="BottomLine blackClassLine"></span>
                <span id="userPwdFrErrTag" class="Tag"></span>
            </div>

            <div id="userSafetyCodeFr" class="Fr">
                <span id="userSafetyCodeFrSafetyCodeTag" class="Tag"></span>
                <input type="password" id="userSafetyCodeFrSafetyCodeInput" maxlength="4" placeholder="安全码"
                    oninput="NameInput(this,'NameInput')" class="inputText">
                <span id="userSafetyCodeFrInputBLine" class="BottomLine blackClassLine"></span>
                <span id="userSafetyCodeFrErrTag" class="Tag"></span>
            </div>

            <div class="submitBtm" onclick="subMitBoxOnClick()">确定</div>
        </section>




    </main>

</body>
<script>
    var submitChoiseNum='signinBtm';
    var blueLineClass = document.getElementsByClassName('BottomLine');
    var inputTextClass = document.getElementsByClassName('inputText');
    var signBtmBLine = document.getElementById('signinBtmBLine');
    var signinBtm = document.getElementById('signinBtm');
    var signupBtm = document.getElementById('signupBtm');

    window.onload = function () {

        signBtmOnClick(signinBtm)

    }


    var fontClass = document.getElementsByClassName('fontClass');
    for (var i = 0; i < fontClass.length; i++) {

        fontClass[i].addEventListener('click', function () {

            signBtmOnClick(this);
        })

    }

    var signBtmOnClick = (mainBtm) => {
        submitChoiseNum = mainBtm.id;
        if (mainBtm.id == 'signupBtm') {
            for (var i = 0; i < blueLineClass.length; i++) {
                blueLineClass[i].classList.add('blueClassLine');
                signBtmBLine.style.transform = 'translateX(50px)';
             
            }
            for (var i = 0; i < inputTextClass.length; i++) {
                inputTextClass[i].classList.add('blueClassFont');
              
            }
            signinBtm.style.color = 'black';
            signupBtm.style.color = '#fff';
        };
        if (mainBtm.id == 'signinBtm') {
            for (var i = 0; i < blueLineClass.length; i++) {
                blueLineClass[i].classList.remove('blueClassLine');
                signBtmBLine.style.transform = 'translateX(0px)'

            }
            for (var i = 0; i < inputTextClass.length; i++) {
                inputTextClass[i].classList.remove('blueClassFont');
                
            }
            signinBtm.style.color = '#fff';
            signupBtm.style.color = 'rgb(0, 0, 170)';
        }




    }
   

    //text的内容发生改变时触发
    function NameInput(a, InputBox) {
        let z = a.parentNode;
        var b = document.getElementById(z.id + 'InputBLine')
        let f = document.getElementById(z.id + 'ErrTag'); //找报错Tag

        let hiddenBox = document.getElementById('hiddenBox');
        hiddenBox.innerText = a.value;



        //注册框时的正则判断

        switch (z.id) {
            case 'userNameFr':
                var e = /^\w+$/;
                var g = '不可行';
                var h = '可行'


                if (a.value.length < 10) {
                    f.innerText = g;
                }
                if (!e.test(a.value)) {  //用户名正则判断
                    f.innerText = g;

                } else if (a.value.length >= 10 && a.value.length <= 12) {
                    f.innerText = h;
                }

                break;

            case 'userPwdFr':

                var e = /^\w+$/;
                var g = '不可行';
                var h = '可行'
                var c = 7;
                var i = 0;

                if (a.value.length < 10) {
                    f.innerText = g;
                }

                if (getPwdLvl(a.value) < 2) {
                    f.innerText = g;
                } else {
                    f.innerText = h
                }
                break;
            case 'userSafetyCodeFr':

                var e;
                var g = '';
                var h = ''
                var c = 7;
                var i = 0;


                break;
        }

        if (z.id == 'userNameFr') {
            b.style.width = hiddenBox.offsetWidth + 11 + 'px'
            if (a.value.length == 0) {
                b.style.width = '50px'
            }
            return;
        } else if (a.value.length > i) {

            b.style.width = 10 + (a.value.length - i) * c + 'px';

        } else {
            b.style.width = '50px'
        }

    }


    //给我密码,我返回对应的级别
    function getPwdLvl(pwd) {
        var lvl = 0;//默认是0级
        //密码中是否有数字,或者是字母,或者是特殊符号
        if (/[0-9]/.test(pwd)) {
            lvl++;
        }
        //判断密码中有没有字母
        if (/[a-zA-Z]/.test(pwd)) {
            lvl++;
        }
        //判断密码中有没有特殊符号
        if (/[^0-9a-zA-Z_]/.test(pwd)) {
            lvl++;
        }
        return lvl;//1 3
    }

    function subMitBoxOnClick() {
        console.log(111);
        console.log(submitChoiseNum);
        switch(submitChoiseNum){

            case "signinBtm":
            
            var userNameData = document.getElementById('userNameFrNameInput').value
            let userName = sessionStorage.getItem("userName");
            console.log(userNameData,userName);
            
            if (userNameData == userName) {
                var userPwdData = document.getElementById('userPwdFrPwdInput').value
                let userPwd = sessionStorage.getItem("userPwd");
                console.log(userPwdData,userPwd);

                if (userPwdData == userPwd) {
                    sStorage('isLogin','yes');
                    window.location = './index.html';
                    

                }

            }





        }
       
    
        




    }




</script>
<script src="./Js/jquery.min.js"></script>
<script src="./Js/Tkl_stoarged_unsql.js"></script>

</html>